जावास्क्रिप्ट कोड क्वालिटी गेट्स: प्री-कमिट हुक कॉन्फ़िगरेशन में महारत हासिल करना

सॉफ्टवेयर डेवलपमेंट की हमेशा विकसित होती दुनिया में, उच्च कोड गुणवत्ता बनाए रखना सर्वोपरि है। स्वच्छ, अच्छी तरह से फॉर्मेट किया गया, और बग-मुक्त कोड न केवल रखरखाव की लागत को कम करता है बल्कि सहयोग को बढ़ावा देता है और विकास चक्र को तेज करता है। कोड गुणवत्ता को लागू करने के लिए एक शक्तिशाली तकनीक प्री-कमिट हुक्स का उपयोग करके कोड क्वालिटी गेट्स का कार्यान्वयन है। यह लेख जावास्क्रिप्ट प्रोजेक्ट्स के लिए प्री-कमिट हुक्स को कॉन्फ़िगर करने के लिए एक व्यापक गाइड प्रदान करता है, जिससे आप कोड को अपनी रिपॉजिटरी तक पहुँचने से पहले ही कोड गुणवत्ता जांच को स्वचालित कर सकते हैं।

प्री-कमिट हुक्स क्या हैं?

गिट हुक्स वे स्क्रिप्ट्स हैं जिन्हें गिट कमिट, पुश, और रिसीव जैसी घटनाओं से पहले या बाद में निष्पादित करता है। विशेष रूप से, प्री-कमिट हुक्स एक कमिट को अंतिम रूप देने से पहले चलते हैं। वे कमिट किए जा रहे परिवर्तनों का निरीक्षण करने और उन कमिट्स को रोकने का एक महत्वपूर्ण अवसर प्रदान करते हैं जो पूर्वनिर्धारित गुणवत्ता मानकों को पूरा नहीं करते हैं। उन्हें उन द्वारपालों के रूप में सोचें जो निम्न-गुणवत्ता वाले कोड को आपके कोडबेस में प्रवेश करने से रोकते हैं।

जावास्क्रिप्ट कोड गुणवत्ता के लिए प्री-कमिट हुक्स का उपयोग क्यों करें?

• प्रारंभिक त्रुटि का पता लगाना: प्री-कमिट हुक्स विकास प्रक्रिया में जल्दी ही कोड गुणवत्ता के मुद्दों को पकड़ लेते हैं, जिससे उन्हें आगे फैलने से रोका जा सकता है। यह कोड समीक्षा के दौरान या, इससे भी बदतर, उत्पादन में समस्याओं की खोज करने की तुलना में कहीं अधिक कुशल है।
• स्वचालित कोड फॉर्मेटिंग: अपनी टीम और प्रोजेक्ट में एक सुसंगत कोड शैली सुनिश्चित करें। स्वचालित फॉर्मेटिंग शैलीगत बहसों को रोकती है और एक अधिक पठनीय कोडबेस में योगदान करती है।
• कोड समीक्षा का बोझ कम: कोडिंग मानकों को स्वचालित रूप से लागू करके, प्री-कमिट हुक्स कोड समीक्षकों पर बोझ कम करते हैं, जिससे वे वास्तुकला संबंधी निर्णयों और जटिल तर्क पर ध्यान केंद्रित कर सकते हैं।
• बेहतर कोड रखरखाव: एक सुसंगत और उच्च-गुणवत्ता वाला कोडबेस समय के साथ बनाए रखना और विकसित करना आसान होता है।
• सुसंगतता लागू करना: वे यह सुनिश्चित करते हैं कि सभी कोड प्रोजेक्ट के मानकों के अनुरूप हों, भले ही डेवलपर ने इसे लिखा हो। यह विशेष रूप से विभिन्न स्थानों - जैसे लंदन, टोक्यो, और ब्यूनस आयर्स - से काम करने वाली वितरित टीमों में महत्वपूर्ण है, जहाँ व्यक्तिगत कोडिंग शैलियाँ भिन्न हो सकती हैं।

जावास्क्रिप्ट कोड गुणवत्ता के लिए प्रमुख उपकरण

जावास्क्रिप्ट कोड गुणवत्ता जांच को स्वचालित करने के लिए प्री-कमिट हुक्स के साथ आमतौर पर कई उपकरणों का उपयोग किया जाता है:

• ESLint: एक शक्तिशाली जावास्क्रिप्ट लिंटर जो संभावित त्रुटियों की पहचान करता है, कोडिंग शैलियों को लागू करता है, और कोड पठनीयता में सुधार करने में मदद करता है। यह नियमों की एक विस्तृत श्रृंखला का समर्थन करता है और अत्यधिक विन्यास योग्य है।
• Prettier: एक दृढ़ कोड फॉर्मेटर जो कोड को एक सुसंगत शैली का पालन करने के लिए स्वचालित रूप से प्रारूपित करता है। यह जावास्क्रिप्ट, टाइपस्क्रिप्ट, JSX, और कई अन्य भाषाओं का समर्थन करता है।
• Husky: एक उपकरण जो गिट हुक्स को प्रबंधित करना आसान बनाता है। यह आपको उन स्क्रिप्ट्स को परिभाषित करने की अनुमति देता है जिन्हें गिट वर्कफ़्लो के विभिन्न चरणों में निष्पादित किया जाएगा।
• lint-staged: एक उपकरण जो लिंटर्स और फॉर्मेटर्स को केवल स्टेज की गई फ़ाइलों पर चलाता है, जिससे प्री-कमिट प्रक्रिया काफी तेज हो जाती है। यह अपरिवर्तित फ़ाइलों पर अनावश्यक जांच को रोकता है।

प्री-कमिट हुक्स को कॉन्फ़िगर करना: एक चरण-दर-चरण गाइड

यहाँ Husky और lint-staged का उपयोग करके अपने जावास्क्रिप्ट प्रोजेक्ट के लिए प्री-कमिट हुक्स सेट करने के बारे में एक विस्तृत गाइड है:

चरण 1: निर्भरताएँ स्थापित करें

सबसे पहले, npm या yarn का उपयोग करके आवश्यक पैकेजों को विकास निर्भरताओं के रूप में स्थापित करें:

            npm install --save-dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

या, yarn का उपयोग करके:

            yarn add --dev husky lint-staged eslint prettier
            

              
                Copy
              
            
          

चरण 2: Husky को इनिशियलाइज़ करें

Husky गिट हुक्स के प्रबंधन की प्रक्रिया को सरल बनाता है। इसे निम्नलिखित कमांड का उपयोग करके इनिशियलाइज़ करें:

            npx husky install
            

              
                Copy
              
            
          

यह आपके प्रोजेक्ट में एक `.husky` डायरेक्टरी बनाएगा, जो आपके गिट हुक्स को संग्रहीत करेगा।

चरण 3: प्री-कमिट हुक को कॉन्फ़िगर करें

Husky का उपयोग करके एक प्री-कमिट हुक जोड़ें:

            npx husky add .husky/pre-commit "npx lint-staged"
            

              
                Copy
              
            
          

यह कमांड `.husky` डायरेक्टरी में एक `pre-commit` फ़ाइल बनाता है और उसमें `npx lint-staged` कमांड जोड़ता है। यह गिट को बताता है कि प्रत्येक कमिट से पहले lint-staged चलाए।

चरण 4: lint-staged को कॉन्फ़िगर करें

lint-staged आपको लिंटर्स और फॉर्मेटर्स को केवल स्टेज की गई फ़ाइलों पर चलाने की अनुमति देता है, जो प्री-कमिट प्रक्रिया को काफी तेज करता है। अपने प्रोजेक्ट रूट में एक `lint-staged.config.js` (या ES मॉड्यूल के लिए `lint-staged.config.mjs`) फ़ाइल बनाएँ और इसे निम्नानुसार कॉन्फ़िगर करें:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
};
            

              
                Copy
              
            
          

यह कॉन्फ़िगरेशन lint-staged को सभी स्टेज की गई जावास्क्रिप्ट और टाइपस्क्रिप्ट फ़ाइलों पर ESLint और Prettier चलाने के लिए कहता है। ESLint में `--fix` फ़्लैग किसी भी लिंटिंग त्रुटियों को स्वचालित रूप से ठीक करता है जिन्हें स्वचालित रूप से ठीक किया जा सकता है, और Prettier में `--write` फ़्लैग फ़ाइलों को प्रारूपित करता है और उन्हें स्वरूपित कोड के साथ ओवरराइट करता है।

वैकल्पिक रूप से, आप अपनी `package.json` फ़ाइल में सीधे कॉन्फ़िगरेशन को परिभाषित कर सकते हैं:

            {
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}
            

              
                Copy
              
            
          

चरण 5: ESLint को कॉन्फ़िगर करें

यदि आपने पहले से नहीं किया है, तो अपने प्रोजेक्ट के लिए ESLint को कॉन्फ़िगर करें। आप निम्नलिखित कमांड का उपयोग करके एक ESLint कॉन्फ़िगरेशन फ़ाइल बना सकते हैं:

            npx eslint --init
            

              
                Copy
              
            
          

यह आपको अपने प्रोजेक्ट की आवश्यकताओं के आधार पर एक ESLint कॉन्फ़िगरेशन फ़ाइल (`.eslintrc.js`, `.eslintrc.json`, या `.eslintrc.yml`) बनाने की प्रक्रिया में मार्गदर्शन करेगा। आप विभिन्न पूर्वनिर्धारित कॉन्फ़िगरेशन में से चुन सकते हैं या अपने स्वयं के कस्टम नियम बना सकते हैं।

उदाहरण `.eslintrc.js`:

            module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier'
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'react',
    '@typescript-eslint'
  ],
  rules: {
    'no-unused-vars': 'warn',
    'react/prop-types': 'off'
  }
};
            

              
                Copy
              
            
          

यह कॉन्फ़िगरेशन अनुशंसित ESLint नियमों, अनुशंसित React नियमों, अनुशंसित TypeScript नियमों का विस्तार करता है, और Prettier के साथ एकीकृत होता है। यह `react/prop-types` नियम को भी अक्षम करता है और `no-unused-vars` नियम को चेतावनी पर सेट करता है।

चरण 6: Prettier को कॉन्फ़िगर करें

अपने प्रोजेक्ट रूट में एक `.prettierrc.js` (या `.prettierrc.json`, `.prettierrc.yml`, या `.prettierrc.toml`) फ़ाइल बनाकर Prettier को कॉन्फ़िगर करें। आप अपने प्रोजेक्ट की शैली दिशानिर्देशों से मेल खाने के लिए Prettier के स्वरूपण विकल्पों को अनुकूलित कर सकते हैं।

उदाहरण `.prettierrc.js`:

            module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2
};
            

              
                Copy
              
            
          

यह कॉन्फ़िगरेशन Prettier को सिंगल कोट्स, कोई सेमीकोलन नहीं, ट्रेलिंग कॉमा, 120 वर्णों की प्रिंट चौड़ाई, और 2 रिक्त स्थान की टैब चौड़ाई का उपयोग करने के लिए सेट करता है।

वैकल्पिक रूप से, आप Prettier कॉन्फ़िगरेशन को `package.json` के अंदर परिभाषित कर सकते हैं:

            {
  "prettier": {
    "semi": false,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 120,
    "tabWidth": 2
  }
}
            

              
                Copy
              
            
          

चरण 7: अपने कॉन्फ़िगरेशन का परीक्षण करें

अपने कॉन्फ़िगरेशन का परीक्षण करने के लिए, कुछ परिवर्तनों को स्टेज करें और उन्हें कमिट करने का प्रयास करें। उदाहरण के लिए:

            git add .
            

              
                Copy
              
            
          

            git commit -m "Test pre-commit hook"
            

              
                Copy
              
            
          

यदि कोई लिंटिंग या स्वरूपण समस्याएँ हैं, तो ESLint और Prettier उन्हें स्वचालित रूप से ठीक कर देंगे (यदि संभव हो) या त्रुटियों की रिपोर्ट करेंगे। यदि त्रुटियों की रिपोर्ट की जाती है, तो कमिट रद्द कर दिया जाएगा, जिससे आप फिर से कमिट करने से पहले समस्याओं को ठीक कर सकेंगे।

उन्नत कॉन्फ़िगरेशन विकल्प

विभिन्न लिंटर्स और फॉर्मेटर्स का उपयोग करना

आप आसानी से अन्य लिंटर्स और फॉर्मेटर्स को अपने प्री-कमिट हुक कॉन्फ़िगरेशन में एकीकृत कर सकते हैं। उदाहरण के लिए, आप CSS या SASS फ़ाइलों को लिंट करने के लिए Stylelint का उपयोग कर सकते हैं:

            npm install --save-dev stylelint stylelint-config-standard
            

              
                Copy
              
            
          

फिर, Stylelint को शामिल करने के लिए अपनी `lint-staged.config.js` फ़ाइल को अपडेट करें:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

कमिट से पहले टेस्ट चलाना

आप प्री-कमिट हुक के हिस्से के रूप में अपने यूनिट टेस्ट भी चला सकते हैं। यह सुनिश्चित करने में मदद करता है कि आपका कोड कमिट होने से पहले सही ढंग से काम कर रहा है। यह मानते हुए कि आप Jest का उपयोग कर रहे हैं:

            npm install --save-dev jest
            

              
                Copy
              
            
          

टेस्ट कमांड को शामिल करने के लिए अपनी `lint-staged.config.js` फ़ाइल को अपडेट करें:

            module.exports = {
  '*.{js,jsx,ts,tsx}': ['eslint --fix', 'prettier --write', 'jest --findRelatedTests'],
  '*.{css,scss}': ['stylelint --fix'],
};
            

              
                Copy
              
            
          

`--findRelatedTests` फ़्लैग Jest को केवल उन टेस्ट को चलाने के लिए कहता है जो बदली हुई फ़ाइलों से संबंधित हैं, जो प्रक्रिया को काफी तेज करता है।

प्री-कमिट हुक्स को छोड़ना

कुछ मामलों में, आप अस्थायी रूप से प्री-कमिट हुक्स को छोड़ना चाह सकते हैं। आप `git commit` कमांड के साथ `--no-verify` फ़्लैग का उपयोग करके ऐसा कर सकते हैं:

            git commit --no-verify -m "Commit message"
            

              
                Copy
              
            
          

हालांकि, आमतौर पर हुक्स को छोड़ने से बचने की सलाह दी जाती है जब तक कि यह बिल्कुल आवश्यक न हो, क्योंकि वे कोड गुणवत्ता बनाए रखने में एक महत्वपूर्ण भूमिका निभाते हैं।

सामान्य समस्याओं का निवारण

• हुक्स नहीं चल रहे हैं: सुनिश्चित करें कि Husky ठीक से स्थापित और इनिशियलाइज़ है, और `.husky` डायरेक्टरी आपके प्रोजेक्ट रूट में मौजूद है। यह भी सत्यापित करें कि `.husky` डायरेक्टरी में `pre-commit` फ़ाइल निष्पादन योग्य है।
• लिंटिंग त्रुटियाँ ठीक नहीं हो रही हैं: सुनिश्चित करें कि ESLint के साथ `--fix` फ़्लैग का उपयोग किया गया है, और आपका ESLint कॉन्फ़िगरेशन कुछ प्रकार की त्रुटियों को स्वचालित रूप से ठीक करने के लिए सेट है।
• Prettier फ़ाइलों को प्रारूपित नहीं कर रहा है: सुनिश्चित करें कि Prettier के साथ `--write` फ़्लैग का उपयोग किया गया है, और आपका Prettier कॉन्फ़िगरेशन ठीक से सेट है।
• धीमे प्री-कमिट हुक्स: लिंटर्स और फॉर्मेटर्स को केवल स्टेज की गई फ़ाइलों पर चलाने के लिए lint-staged का उपयोग करें। जाँच किए जाने वाले नियमों और सेटिंग्स की संख्या को कम करने के लिए अपने ESLint और Prettier कॉन्फ़िगरेशन को अनुकूलित करने पर भी विचार करें।
• विरोधाभासी कॉन्फ़िगरेशन: सुनिश्चित करें कि आपके ESLint और Prettier कॉन्फ़िगरेशन एक-दूसरे के साथ संघर्ष नहीं करते हैं। यदि वे करते हैं, तो आपको संघर्षों को हल करने के लिए एक या दोनों कॉन्फ़िगरेशन को समायोजित करने की आवश्यकता हो सकती है। संघर्षों से बचने के लिए `eslint-config-prettier` और `eslint-plugin-prettier` जैसे साझा कॉन्फ़िगरेशन का उपयोग करने पर विचार करें।

प्री-कमिट हुक्स के लिए सर्वोत्तम अभ्यास

• हुक्स को तेज़ रखें: धीमे हुक्स डेवलपर उत्पादकता को महत्वपूर्ण रूप से प्रभावित कर सकते हैं। केवल स्टेज की गई फ़ाइलों को संसाधित करने के लिए lint-staged का उपयोग करें और अपने लिंटर और फॉर्मेटर कॉन्फ़िगरेशन को अनुकूलित करें।
• स्पष्ट त्रुटि संदेश प्रदान करें: जब कोई हुक विफल हो, तो डेवलपर्स को समस्याओं को ठीक करने के तरीके पर मार्गदर्शन करने के लिए स्पष्ट और जानकारीपूर्ण त्रुटि संदेश प्रदान करें।
• जितना संभव हो उतना स्वचालित करें: मैनुअल प्रयास को कम करने और स्थिरता सुनिश्चित करने के लिए कोड स्वरूपण और लिंटिंग को स्वचालित करें।
• अपनी टीम को शिक्षित करें: सुनिश्चित करें कि सभी टीम के सदस्य प्री-कमिट हुक्स के उद्देश्य को समझते हैं और उन्हें प्रभावी ढंग से कैसे उपयोग करना है।
• एक सुसंगत कॉन्फ़िगरेशन का उपयोग करें: अपने प्रोजेक्ट में ESLint, Prettier, और अन्य उपकरणों के लिए एक सुसंगत कॉन्फ़िगरेशन बनाए रखें। यह सुनिश्चित करने में मदद करेगा कि सभी कोड एक ही तरह से स्वरूपित और लिंट किए गए हैं। एक साझा कॉन्फ़िगरेशन पैकेज का उपयोग करने पर विचार करें जिसे कई प्रोजेक्ट्स में आसानी से स्थापित और अपडेट किया जा सकता है।
• अपने हुक्स का परीक्षण करें: नियमित रूप से अपने प्री-कमिट हुक्स का परीक्षण करें ताकि यह सुनिश्चित हो सके कि वे सही ढंग से काम कर रहे हैं और वे किसी भी अप्रत्याशित समस्या का कारण नहीं बन रहे हैं।

वैश्विक विचार

विश्व स्तर पर वितरित टीमों में काम करते समय, निम्नलिखित पर विचार करें:

• सुसंगत टूल संस्करण: सुनिश्चित करें कि सभी टीम सदस्य ESLint, Prettier, Husky, और lint-staged के समान संस्करणों का उपयोग कर रहे हैं। यह आपकी `package.json` फ़ाइल में संस्करणों को निर्दिष्ट करके और निर्भरताओं को स्थापित करने के लिए npm या yarn जैसे पैकेज मैनेजर का उपयोग करके प्राप्त किया जा सकता है।
• क्रॉस-प्लेटफ़ॉर्म संगतता: अपने प्री-कमिट हुक्स का विभिन्न ऑपरेटिंग सिस्टम (Windows, macOS, Linux) पर परीक्षण करें ताकि यह सुनिश्चित हो सके कि वे सभी प्लेटफ़ॉर्म पर सही ढंग से काम करते हैं। जब भी संभव हो, क्रॉस-प्लेटफ़ॉर्म टूल और कमांड का उपयोग करें।
• समय क्षेत्र का अंतर: प्री-कमिट हुक मुद्दों के बारे में टीम के सदस्यों के साथ संवाद करते समय समय क्षेत्र के अंतर का ध्यान रखें। मुद्दों को जल्दी हल करने में उनकी मदद करने के लिए स्पष्ट निर्देश और उदाहरण प्रदान करें।
• भाषा समर्थन: यदि आपके प्रोजेक्ट में कई भाषाओं के साथ काम करना शामिल है, तो सुनिश्चित करें कि आपके प्री-कमिट हुक्स प्रोजेक्ट में उपयोग की जाने वाली सभी भाषाओं का समर्थन करते हैं। आपको प्रत्येक भाषा के लिए अतिरिक्त लिंटर्स और फॉर्मेटर्स स्थापित करने की आवश्यकता हो सकती है।

निष्कर्ष

प्री-कमिट हुक्स को लागू करना जावास्क्रिप्ट प्रोजेक्ट्स में कोड गुणवत्ता को लागू करने, टीम सहयोग में सुधार करने और रखरखाव की लागत को कम करने का एक प्रभावी तरीका है। ESLint, Prettier, Husky, और lint-staged जैसे उपकरणों को एकीकृत करके, आप कोड स्वरूपण, लिंटिंग, और परीक्षण को स्वचालित कर सकते हैं, यह सुनिश्चित करते हुए कि केवल उच्च-गुणवत्ता वाला कोड ही आपकी रिपॉजिटरी में कमिट किया जाता है। इस गाइड में बताए गए चरणों का पालन करके, आप एक मजबूत कोड गुणवत्ता गेट स्थापित कर सकते हैं जो आपको स्वच्छ, अधिक रखरखाव योग्य, और अधिक विश्वसनीय जावास्क्रिप्ट एप्लिकेशन बनाने में मदद करेगा। इस अभ्यास को अपनाएं और आज ही अपनी टीम के विकास वर्कफ़्लो को उन्नत करें।